<template>
    <div v-loading.fullscreen.lock="loading">
        <div>
            <img style="width: 100%;"  src="@/assets/img/edutop.jpg"/>
        </div>
        <div class="container">
            <div class="mianbao">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>人才培养</el-breadcrumb-item>
                    <el-breadcrumb-item>本科生教学</el-breadcrumb-item>
                </el-breadcrumb>

                <div class="search">
                     <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="query.title" @blur="college">
                    </el-input>
                     <el-button slot="append" icon="el-icon-search"></el-button>
                </div>
            </div>
            <div class="list" v-for="(item,index) in list" :key="index" @click="nav(item.id)">
                        <div class="h"><span class="el-icon-caret-right"></span>{{item.title}}</div>
                        <!-- {{item.content}} -->
                        <div>{{item.creatime}}</div>
            </div>
            
            
            <div class="page">
                <!-- <span>调整每页显示条数</span> -->
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="query.limit"
                layout="total,sizes, prev, pager, next"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {undergraduate} from '@/api/apis.js'
import '@/assets/js/index.js'
export default {
    data(){
        return{
            query:{
                limit:10,
                page:1,
                title:''
            },
            list:[],
            total:0,
            loading:true      
        }
    },
    created(){
        this.college()
    },
    methods:{
        async college(){
            // console.log(this.query)
            const {data:res}=await undergraduate(this.query)
            // console.log(res.data)
            res.data.records.forEach((item) => {
                // console.log(item.creatime.split(' ')[0])
                item.creatime=item.creatime.split(' ')[0]
                return item.creatime
            });
            this.list=res.data.records
            this.total=res.data.total
            this.loading=false
        },
        handleSizeChange(newSize){
            this.query.limit=newSize
            this.college()
        },
        handleCurrentChange(newPage){
            this.query.page=newPage
            this.college()
        },
        nav(id){
           this.$router.push({
               path:'/Colleage_detail',
               query:{
                id
               }
           }) 
        }
    }
}
</script>

<style lang="less" scoped>
.h{
    width: 7.5rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.el-breadcrumb{
    font-size: .25rem;
    margin-left: .1rem;
}
.container{
    width: 10rem;
    margin: 0 auto;
    font-size: 0.2rem;
    .page{
        margin-top: 20px;
        .el-pagination{
            font-size: 10px;
        }
    }
    .mianbao{
        margin: .01rem 0 .1rem 0;
        display: flex;
        align-items:center;
        .search{
            margin-left: 20px;
            display: flex;
        }
    }
    .list{      
        display: flex;
        height: .5rem;
        line-height: .5rem;
        justify-content: space-between;
        border-bottom: 1px dashed #dad7d7;
    }
    .list:hover{
        color:#ffc653;
        cursor: pointer;
    }
}
</style>